<template>
  <div>
    <el-table
      :data="tableData"
      row-key="id"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="initData" label="文章标题" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.initData.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="initData"
        label="作者"
        width="180"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <span v-if="listQuery.flowType == 1">
            {{ row.initData.author1 }}
            {{ row.initData.author2 }}
            {{ row.initData.author3 }}
            {{ row.initData.author4 }}
          </span>
          <span v-else>{{ row.initData.author || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="initData"
        label="栏目"
        width="100"
        v-if="listQuery.flowType == 1"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          {{ row.initData.classifyNames || '--' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="initData"
        label="审核状态"
        width="100"
        v-if="auditType == 1"
      >
        <template slot-scope="{ row }">
          <span class="color-info">待审核</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="initData"
        label="审核状态"
        width="100"
        v-if="auditType == 2"
      >
        <template slot-scope="{ row }">
          <span v-if="row.approverStatus == 2" class="color-success">通过</span>
          <span v-if="row.approverStatus == 3" class="color-danger">驳回</span>
        </template>
      </el-table-column>
      <el-table-column prop="initData" label="提交人" width="100">
        <template slot-scope="{ row }">
          {{ row.flowInitiateUser.userName }}
        </template>
      </el-table-column>
      <el-table-column prop="initData" label="创建时间" width="180">
        <template slot-scope="{ row }">
          {{ row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="{ row }">
          <el-button-group>
            <el-button type="success" size="mini" @click="handlePreview(row)"
              >预览</el-button
            >
            <el-button
              type="primary"
              size="mini"
              v-if="auditType == 2"
              @click="handleLookFlow(row)"
              >查看审核流程</el-button
            >
            <el-button
              type="primary"
              size="mini"
              v-if="auditType == 1"
              @click="handleAudit(row)"
              >审核</el-button
            >
            <!-- <el-button
              type="danger"
              size="mini"
              v-if="auditType == 1"
              @click="handleReject(row)"
              >驳回</el-button
            > -->
          </el-button-group>
        </template>
      </el-table-column>
      <div slot="empty" class="emptyBg">
        <el-empty :image-size="200"></el-empty>
      </div>
    </el-table>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      listQuery: {
        page: 1,
        limit: 10,
        approverId: '',
        flowType: '1', //1资源审核 2.新闻审核
      },
      tableData: [],
      pageObj: {},
    }
  },
  props: ['auditType'],
  watch: {
    $route: {
      immediate: true,
      handler(v) {
        let { flowType } = v.meta
        this.listQuery.flowType = flowType
        this.getList()
      },
    },
    auditType: {
      immediate: true,
      handler() {
        this.getList()
      },
    },
  },
  mounted() {
    this.$bus.$on('refeshFlowRunTask', (v) => {
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('refeshFlowRunTask')
  },
  methods: {
    async getList() {
      this.tableData = []
      this.listQuery.approverId = this.$store.getters.userId
      let dispatchType =
        this.auditType == 1 ? 'queryFlowRunTask' : 'queryFlowHisTask'
      let res = await this.$store.dispatch(dispatchType, this.listQuery)
      this.pageObj = res
      this.tableData =
        this.auditType == 1 ? res.data[0].flowRunTaskList : res.data
      this.tableData.forEach((item) => {
        this.$set(item, 'initData', JSON.parse(item.businessData))
      })
    },
    //预览
    handlePreview(row) {
      this.$bus.$emit('collectLogPreview', row.initData)
    },
    //查看审核流程
    handleLookFlow(row) {
      this.$bus.$emit('showDialogFlowInfo', row)
    },
    //批量操作
    handleSelectionChange(val) {
      this.$bus.$emit('deleteBatchNewsContents', val)
    },
    //审核
    handleAudit(row) {
      this.$bus.$emit('showDialogAudit', [row])
    },
    //驳回
    async handleReject(row) {
      let { businessKey } = row
      await this.$store.dispatch('turnDownFlowRunTask', { businessKey })
      this.getList()
      this.successMsg('操作成功')
    },
  },
}
</script>
<style scoped lang="scss">
</style>